<template>
	<!-- 普通弹窗 -->
	<uni-popup ref="popup" is-mask-click>
		<view class="infoPopup">
			<view class="head">
				<text>壁纸信息</text>
				<uni-icons class="close-icon" @click="close" type="closeempty" size="18"></uni-icons>
			</view>
			<view class="content">
				<view class="row">
					<text class="lable">壁纸ID：</text>
					<text class="value">121313151515</text>
				</view>
				<view class="row">
					<text class="lable">发布者：</text>
					<text class="value">爱睡觉的小熊</text>
				</view>
				<view class="row">
					<text class="lable">评分：</text>
					<view class="value">
						<uni-rate class="rate" allow-half size="18" readonly="true" value="4.5" />
						<text class="rateText">4.5分</text>
					</view>
				</view>
				<view class="row">
					<text class="lable">摘要：</text>
					<text class="value">都可能撒大窟窿就撒开了多久，了撒可见度了大势力扩大势力就打开拉萨就打开拉萨觉得撒肯定就拉克丝建档立卡时间</text>
				</view>
				<view class="row">
					<text class="lable">标签：</text>
					<view class="value">
						<uni-tag class="uni-tag" inverted :circle="true" text="AI美女" type="primary"/>
						<uni-tag class="uni-tag" inverted :circle="true" text="长发美女" type="primary"/>
						<uni-tag class="uni-tag" inverted :circle="true" text="壁纸" type="primary"/>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref,
		defineExpose
	} from 'vue' // 引入defineExpose
	const popup = ref()

	function open() {
		popup.value.open('bottom')
	}
	
	function close(){
		popup.value.close()
	}

	defineExpose({
		open
	})
</script>

<style lang="scss" scoped>
	.infoPopup {
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;

		.head {
			position: relative;
			text-align: center;
			padding: 50rpx 0;
			font-size: 25rpx;
			color: $text-font-color-2;

			:deep() {
				.close-icon {
					position: absolute;
					right: 20rpx;
					color: $text-font-color-2 !important;
				}
			}
		}

		.content {
			padding: 0 35rpx 30rpx;

			.row {
				padding-bottom: 30rpx;
				display: flex;

				.lable {
					flex: 1;
					display: flex;
					justify-content: end;
					font-size: 28rpx;
					color: $text-font-color-2;
				}

				.value {
					flex: 4;

					.rate {
						display: inline-block;
					}

					.rateText {
						display: inline-block;
						height: 100%;
						vertical-align: middle;
						font-size: 25rpx;
						color: rgb(255, 202, 62);
					}
					:deep() {
						.uni-tag{
							font-size: 20rpx;
							margin-right: 20rpx;
							color: $brand-theme-color;
							border-color: $brand-theme-color;
						}
					}
				}
			}
		}
	}
</style>